﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="icon" type="images/x-icon" href="img/icons/favicon.ico">
    <link rel="stylesheet" href="plugins/swiper/swiper.min.css">
    <link rel="stylesheet" href="css/indexNew.css">
    <style>
        .SY-content .section2 .swiper-container .normal-content1{
            -webkit-transition: transform 1.0s;
            -moz-transition: transform 1.0s;
            -ms-transition: transform 1.0s;
            -o-transition: transform 1.0s;
            transition: transform 1.0s;
            -webkit-transform: scale(0.7);
            -moz-transform: scale(0.7);
            -ms-transform: scale(0.7);
            -o-transform: scale(0.7);
            transform: scale(0.7);
        }
    </style>
</head>
<body>
<!--头部 开始-->
<div class="SY-header pf">
    <div class="clearfix">
        <div class="SY-logo fl usn">
            <a href="#"><img src="img/icons/logo.png" alt="深夜CG"><span class="slogin">深夜艺术</span></a>
        </div>
        <div class="SY-topRight fr">
            <ul class="clearfix">
                <li class="SY-regLog fr dn">
                    <a href="http://www.shenyecg.com/Portal/Register">注册</a>
                </li>
                <li class="SY-exit fr">
                    <a href="javascript:void(0);">退出</a>
                </li>
                <li class="SY-userPic fr pr">
                    <a href="UserCenter.html">
                        <img class="br50" src="img/icons/person.png" alt="userPic">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--头部 结束-->
<!--主内容 开始-->
<div class="SY-content">
    <div class="section1">
        <div class="wrap tac">
            <h2 class="title">让艺术改变世界</h2>
            <p class="subTitle"><i class="incremental-counter" data-current="10000" data-value="10156"></i>位艺术家已加入深夜</p>
            <p class="text">每一个在深夜前行的艺术家，都应该有一束光</p>
            <div class="btns">
                <a class="SY-art dib" href="http://art.shenyecg.com/" target="_blank">深夜研习社</a>
                <a class="SY-cg dib" href="http://www.shenyecg.com/Home/Index" target="_blank">深夜学院</a>
                <a class="SY-recruit dib" href="Recruit.html" target="_blank">深夜招聘(测试版)</a>
            </div>
        </div>
    </div>
    <div class="section2">
        <div class="tabBox clearfix">
            <div class="lineLeft fl clearfix">
                <p class="line fl"></p>
                <div class="tabText fl">
                    <p class="subTitle">&nbsp;</p>
                    <p class="title">深夜研习社</p>
                </div>
            </div>
            <div class="lineRight fr">
                <p class="line"></p>
            </div>
        </div>
        <div class="SY-banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" data-swiper-slide-index="0">
                        <div class="slide-content clearfix">
                            <div class="slide-pic fl pr">
                                <div class="cover pa"></div>
                                <a href="http://www.shenyecg.com/Home/Index" target="_blank">
                                    <img src="http://img.yxs.shenyecg.com/Image/JrNSoPgAo2cDfICfFEYS8O0YiNcuoQSx/bMyz4F43YK.png" alt="">
                                </a>
                            </div>
                            <div class="slide-msg fl pr">
                                <div class="titleBox pr">
                                    <p class="title">深夜学院</p>
                                    <div class="size pa"></div>
                                </div>
                                <div class="rightMsg num3 pa"></div>
                                <div class="mainMsg">
                                    <p class="text">一个认真做教育的线上平台</p>
                                    <p class="txt">众课--让学习成本更低的网络课</p>
                                    <p class="txt">免费公开课--大咖免费直播公开课</p>
                                    <p class="txt">精品教程--精品视频教程一键获取</p>
                                    <a class="btn db tac" href="http://www.shenyecg.com/Home/Index" target="_blank">进入学院</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide" data-swiper-slide-index="1">
                        <div class="slide-content clearfix">
                            <div class="slide-pic fl pr">
                                <div class="cover pa"></div>
                                <a href="http://art.shenyecg.com/" target="_blank">
                                    <img src="http://img.yxs.shenyecg.com/Image/PHBNAHGHK2CL5GhvQAK3AMnygpUhcyka/3H3ptBKP62.png" alt="">
                                </a>
                            </div>
                            <div class="slide-msg fl pr">
                                <div class="titleBox pr">
                                    <p class="title">深夜研习社</p>
                                    <div class="size pa"></div>
                                </div>
                                <div class="rightMsg num1 pa"></div>
                                <div class="mainMsg">
                                    <p class="text">与世界分享您的创作</p>
                                    <p class="txt">展示--艺术人的展示天地</p>
                                    <p class="txt">交流--同行的交流社区</p>
                                    <p class="txt">记录--记录每一个艺术家的成长</p>
                                    <a class="btn db tac" href="http://art.shenyecg.com/" target="_blank">进入研习社</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide" data-swiper-slide-index="2">
                        <div class="slide-content clearfix">
                            <div class="slide-pic fl pr">
                                <div class="cover pa"></div>
                                <a href="Recruit.html" target="_blank">
                                    <img src="http://img.yxs.shenyecg.com/Image/A5Z20N8Hau4QrEqOSZB0ET2SHoKhBCYh/EZebsrswaj.png" alt="">
                                </a>
                            </div>
                            <div class="slide-msg fl pr">
                                <div class="titleBox pr">
                                    <p class="title">深夜招聘</p>
                                    <div class="size pa"></div>
                                </div>
                                <div class="rightMsg num4 pa"></div>
                                <div class="mainMsg">
                                    <p class="text">您想要的艺术家都在深夜</p>
                                    <p class="txt">垂直资源&nbsp;精准投放</p>
                                    <p class="txt">集聚艺术&nbsp;发现人才</p>
                                    <p class="txt">专业社区&nbsp;从心而聘</p>
                                    <a class="btn db tac" href="Recruit.html" target="_blank">进入深夜招聘</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide" data-swiper-slide-index="3">
                        <div class="slide-content clearfix">
                            <div class="slide-pic fl pr">
                                <div class="cover pa"></div>
                                <img src="http://img.yxs.shenyecg.com/Image/g6EPKl8vCAIvTlViVWCGzGoRoIbsGcWk/PxSRwfdx7J.png" alt="">
                            </div>
                            <div class="slide-msg fl pr">
                                <div class="titleBox pr">
                                    <p class="title">敬请期待</p>
                                    <div class="size pa"></div>
                                </div>
                                <div class="rightMsg num2 pa"></div>
                                <div class="mainMsg">
                                    <p class="text">深夜工作室努力开发中！敬请期待</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="normal-content left pa">
                    <img src="http://img.yxs.shenyecg.com/Image/R898qDpWMNTPJhVc4X3deGT2XvhD5TIr/KDP7fn3EyB.png" alt="">
                </div>
                <div class="normal-content right pa">
                    <img src="http://img.yxs.shenyecg.com/Image/cvBAGSy2EtwO3YoDOtfxMOokAcEsgrwo/sWkaR4fmms.png" alt="">
                </div>
            </div>
            <div class="swiper-pagination">
                <span class="statusNum">2</span><span class="split">/</span><span class="totalNum">4</span>
            </div>
            <div class="button">
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </div>
    <div class="section3">
        <div class="wrap tac">
            <p class="txt">Elite will gather</p>
            <p class="title">精英荟萃</p>
            <p class="subTitle">优秀艺术家的聚集地，百万级创作人的专业交流圈</p>
            <div class="userBox">
                <ul class="userList clearfix">
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/w0OWJ1qiPqJVXxrTVFGou4ReewWbdFEI/HTZAxfYb5c.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">大石头CG</p>
                                <p class="user-desc">武汉深夜数字艺术创始人,资深艺术家</p>
                            </div>
                        </a>
                    </li>
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/KnmhuOu1oin2JOKZh7kJlZFYqUdK2p01/jKbsXXbQfP.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">韩建毅</p>
                                <p class="user-desc">易盛印象文化传播有限公司创始人</p>
                            </div>
                        </a>
                    </li>
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/bIIVNlhYj9uYDiF7IOof8T6EIVSX2iqg/pTWMKFQ4ip.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">郑虎</p>
                                <p class="user-desc">腾讯资深游戏美术设计师</p>
                            </div>
                        </a>
                    </li>
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/NjWnIipQe07C2zYWIntZbMfm0wiqXKMu/wkAwTMRFzf.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">冯波</p>
                                <p class="user-desc">十色魔方工作室创始人，自由CG制作人</p>
                            </div>
                        </a>
                    </li>
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/Ud3UhhkIQ69Pkqw6U7M8pmBEzkc8KqpA/K4f4FbmKzS.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">陈光</p>
                                <p class="user-desc">cg模型师</p>
                            </div>
                        </a>
                    </li>
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/QCC5D7VXUQD9IzfAV7BP6LQ4JbTXTeyp/YsGJQxsTRD.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">张炜龙</p>
                                <p class="user-desc">腾讯游戏美术设计师</p>
                            </div>
                        </a>
                    </li>
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/cLC5kS9ZQTsaqiYUDA3UIfGbneUjgHr5/KBwnJCDzee.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">古月</p>
                                <p class="user-desc">CG模型师，高级3D次世代角色设计师</p>
                            </div>
                        </a>
                    </li>
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/rq48QxYfw2jbuxZcuQ2eiE8ecBxBSJz7/JK3sWcXNrS.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">Eric zhang</p>
                                <p class="user-desc">好莱坞特效大师，《黑豹》主创之一</p>
                            </div>
                        </a>
                    </li>
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/vlfJolQj6wzNm0FslYxJMpnJx6UDPxsq/84N6YSb3Pa.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">芦振宇</p>
                                <p class="user-desc">腾讯高级游戏美术师</p>
                            </div>
                        </a>
                    </li>
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/U8RSXQYBbtWJql0YqG6H0CeXb0wqCUaz/yaweyy8jji.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">董超</p>
                                <p class="user-desc">翼次方CG创始人</p>
                            </div>
                        </a>
                    </li>
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/Rrmu1aOmHU19pgzeK8TW7kp3ybWLAf7I/tEH44t5Hjt.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">大烽</p>
                                <p class="user-desc">资深CG插画师</p>
                            </div>
                        </a>
                    </li>
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/HSDMXKCkuyMFLsQXUJlgrMCcQIc5qQiY/HtCQ7mNJtd.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">陈昊</p>
                                <p class="user-desc">资深TD技术支持</p>
                            </div>
                        </a>
                    </li>
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/CvvTBn5SMcZRiWp5t47rKfi79BvsMd96/FiZY3emDiT.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">王宇昕</p>
                                <p class="user-desc">资深次世代美术师</p>
                            </div>
                        </a>
                    </li>
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/cHHpoNbYrGOsoKlwBXiwR4hdzljiyeRd/JP3XkCyMsG.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">ChrisZhang</p>
                                <p class="user-desc">花瓣推荐设计师</p>
                            </div>
                        </a>
                    </li>
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/kvv5jwEbx22SYTglQdSOlnimo2bNO08A/2nMPTRtFfB.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">菜唠师</p>
                                <p class="user-desc">游戏原画设计师</p>
                            </div>
                        </a>
                    </li>
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/RgDfUXkrEbR7bk1lmrbpnLAqebqnTzTU/kk84bxrTFM.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">邹辉</p>
                                <p class="user-desc">CG特效师、houdini之道系列教程作者</p>
                            </div>
                        </a>
                    </li>
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/xzhrH2fpXbegoS0jOlGYc8MJkDziQLBK/tJmExXZ3wQ.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">大勇</p>
                                <p class="user-desc">CG影视模型师</p>
                            </div>
                        </a>
                    </li>
                    <li class="user transition6 fl pr">
                        <a class="db" href="javascript:void(0);">
                            <div class="user-pic">
                                <img src="http://img.yxs.shenyecg.com/Image/8Q9pT80iFRqQ8Osf3DkBBQC5yphEFizJ/pcGMjpXktx.png" alt="">
                            </div>
                            <div class="user-msg transition6 pa">
                                <p class="user-nickName">吴明宇</p>
                                <p class="user-desc">CG模型师、CG贴图师</p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="btnBox">
                <a class="createFutureBtn db" href="http://art.shenyecg.com/Portal/Register" target="_blank">深夜邀请你&nbsp;创造未来</a>
            </div>
        </div>
    </div>
</div>
<!--主内容 结束-->
<!--页脚 开始-->
<div class="SY-footer">
    <div class="SY-friendLink">
        <div class="wrap tac">
            <p class="title">友情链接</p>
            <div class="linkBox">
                <ul class="clearfix">
                    <li class="link fl">
                        <a href="javascript:void(0);">微元素网络社区</a>
                    </li>
                    <li class="link fl">
                        <a href="javascript:void(0);">Ghostxx</a>
                    </li>
                    <li class="link fl">
                        <a href="javascript:void(0);">CGjoy</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="SY-foot">
        <div class="wrap clearfix">
            <p class="recordNumber fl">
            Copyright&copy; shenyecg.com 2017 | 鄂ICP备16021987号-1
            <a href="http://whgswj.whhd.gov.cn:8089/whwjww/indexquery/indexqueryAction!dizview.dhtml?chr_id=379d9b10d232529516532c8b3bf6f2b3&amp;bus_ent_id=442010000000629907&amp;bus_ent_chr_id=3da962ba0de3462582010d02858cd183" target="_blank">
                <img src="http://whgswj.whhd.gov.cn:8089/whwjww/images/govIcon.gif" title="武汉网监电子标识" alt="武汉网监电子标识" border="0" style="width: 26px;height: 26px;display: inline-block;vertical-align: top;margin-top: 24px;">
            </a>
        </p>
            <ul class="iconList fr clearfix">
            <li class="pr fl">
                <span class="wechat linkIcon"></span>
                <div class="weChatCode tac pa">
                    <i class="icon-arrow-down pa"></i>
                    <p class="scan">扫描二维码</p>
                    <p class="text">关注微信公众号</p>
                    <img src="http://img.yxs.shenyecg.com/Image/EmoZN7fVCXqzAxQDOF8NVSuXGXg5pZsF/nbJcAiSTsB.jpg" alt="">
                </div>
            </li>
            <li class="fl"><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=2431302093&amp;site=qq&amp;menu=yes" target="_blank"><span class="tencent linkIcon"></span></a></li>
            <li class="fl"><a href="https://weibo.com/shenyecg" target="_blank"><span class="sina linkIcon"></span></a></li>
        </ul>
        </div>
    </div>
</div>
<!--页脚 结束-->
<script src="js/jquery.min.js"></script>
<script src="plugins/swiper/swiper.min.js"></script>
<script type="text/javascript" src="js/incrementalCounter.js"></script>
<script>
    //第一屏动态数字
    $(".incremental-counter").incrementalCounter();

    var tabBoxSubTitle = $(".section2 .tabBox .tabText  .subTitle");
    var tabBoxTitle = $(".section2 .tabBox .tabText  .title");
    var normalContent = $(".SY-banner .normal-content");
    var normalContentLeft = $(".SY-banner .normal-content.left");
    var normalContentRight = $(".SY-banner .normal-content.right");
    var statusNum = $(".SY-banner .swiper-pagination .statusNum");

    //第二屏swiper
    var swiper = new Swiper('.swiper-container', {
        //autoplay:3000, //自动轮播
        initialSlide: 1,
        speed: 1000,
        autoplayDisableOnInteraction: false,
        loop: true,
        observer:true,
        observeParents:true,
        centeredSlides: true,
        slideToClickedSlide:true,
        slidesPerView: 2,
        //onlyExternal:true, //禁止鼠标拖动切换图片
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        onSlideChangeStart: function (swiper) {
            var index = (swiper.realIndex +1);
            switch (index) {
                case 1:
                    tabBoxTitle.html("深夜学院");

                    normalContentLeft.find("img").attr("src", "http://img.yxs.shenyecg.com/Image/g72n3wVRnac3pLkeT7TiNvzZy5vZqwgI/NYhEsyTXMc.png");
                    normalContentRight.find("img").attr("src", "http://img.yxs.shenyecg.com/Image/8zDLfhCFZe8hM1ia20P5FNuxIVxJDXRG/ESCBKXDEM5.png");

                    break;
                case 2:
                    tabBoxTitle.html("深夜研习社");

                    normalContentLeft.find("img").attr("src", "http://img.yxs.shenyecg.com/Image/R898qDpWMNTPJhVc4X3deGT2XvhD5TIr/KDP7fn3EyB.png");
                    normalContentRight.find("img").attr("src", "http://img.yxs.shenyecg.com/Image/LQM4zqAdTIrBeuMTwo6gwxodO2oUHSxF/6C227e7ktc.png");
                    break;
                case 3:
                    tabBoxTitle.html("深夜招聘");

                    normalContentLeft.find("img").attr("src", "http://img.yxs.shenyecg.com/Image/8zDLfhCFZe8hM1ia20P5FNuxIVxJDXRG/ESCBKXDEM5.png");
                    normalContentRight.find("img").attr("src", "http://img.yxs.shenyecg.com/Image/g72n3wVRnac3pLkeT7TiNvzZy5vZqwgI/NYhEsyTXMc.png");
                    break;
                case 4:
                    tabBoxTitle.html("敬请期待");

                    normalContentLeft.find("img").attr("src", "http://img.yxs.shenyecg.com/Image/LQM4zqAdTIrBeuMTwo6gwxodO2oUHSxF/6C227e7ktc.png");
                    normalContentRight.find("img").attr("src", "http://img.yxs.shenyecg.com/Image/R898qDpWMNTPJhVc4X3deGT2XvhD5TIr/KDP7fn3EyB.png");
                    break;
                default:
                    break;
            }
            statusNum.html(index);
        }
    });

    normalContentLeft.click(function () {
        swiper.slidePrev();
    });
    normalContentRight.click(function () {
        swiper.slideNext();
    });

    changeSize();
    $(window).resize(function () {
        changeSize();
    });

    function changeSize() {
        var width = $(".SY-banner .swiper-wrapper .swiper-slide-active img").width();
        var height = $(".SY-banner .swiper-wrapper .swiper-slide-active img").height();

        //normalContent.width(height * 0.7 * 0.5);
        normalContent.find("img").height(height * 0.7);
    }
</script>
</body>
</html>